<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>生产</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei";
            list-style: none;
        }

        html, body {
            height:100%;
            font-size: 100%;
        }

        .content {
            margin: 0 auto;
            height: 100%;
            width: 95%;
            color: #8d8d8d;
            padding: 1rem 0 1rem 0;
            box-sizing: border-box;
        }

        .content-one {
            margin: 0 auto;
            margin-bottom: 3.5rem;
            padding: 1.5rem 0.6rem 1rem;
            background-color: #e6e6e6;
            border-radius: 5px;
        }

        .production {
            width: 100%;
            box-sizing: border-box;
            display: inline;
            height: 3rem;
            margin: 0.6rem 0;
            border: 0.1rem solid #ccc;
            border-radius: 0.2rem;
            background-color: #f5f5f5;
            padding-left: 0.6rem;
            font-size: 1em;
        }

        .production-info {
            padding-right: 2em;
            background-size: 20px;
        }

        .sousuo {
            width: 100%;
            color: #fff;
            height: 3rem;
            line-height: 3rem;
            background-color: #0089f1;
            font-size: 1rem;
            box-sizing: border-box;
            border: 0;
        }

        .sn img {
            vertical-align: middle;
            padding-right: 1rem;
            width: 30px;
        }

        .sn span {
            vertical-align: middle;
            color: #666;
        }

        .line {
            margin-left: 12px;
            border-left: 0.3rem solid #0089f1;
            padding: 1rem 0 3.2rem 1.5rem;
        }

        .no-line{
            border-left: 0.3rem solid rgba(255, 255, 255, 0);
        }

        .one {
            color: #000;
            border-radius: 0.2rem;
            background-color: #eee;
            border-radius: 5px;
            overflow: hidden;
        }

        .number {
            position: relative;
            color: #fff;
            padding: 0 0.5rem;
            background-color: #0089f1;
            height: 3.5rem;
            font-size: 1rem;
            line-height: 3.5rem;
        }

        .one .up, .one .down{
            position: absolute;
            right: 3rem;
            text-decoration: none;
            color: #fff;
            width: 0.6rem;
            height: 0.6rem;
            top: 1.5rem;
            right: 0.8rem;
            border-left: 3px solid #fff;
            border-top: 3px solid #fff;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        .one .down{
            top:1.1rem;
            border: 0;
            border-right: 3px solid #fff;
            border-bottom: 3px solid #fff;
        }

        .message {
            padding: 0.7rem;
        }

        .contorler {
            padding-top: 1.7rem;
        }

        .beizhu {
            padding-bottom: 2rem;
        }

        .number-content-hide{
            display: none;
        }
    </style>
    <%@ include file="jsapi-header.jsp"%>
    <script type="text/javascript">
        dd.ready(function() {
            dd.biz.navigation.setRight({show: false});
        });

        var batchItems = [];
        function selectModel(ele){
            dd.biz.util.chosen({
                source: ${modelItems},
                onSuccess : function(result) {
                    batchItems = [];
                    ele.value = result.key;
                    $.getJSON("${gPath}/clmp/dingtalk/mobility/shift/getBatchByDeviceAttr", {device_attr_id: result.value}, function(result){
                        for (var i in result){
                            var obj = {};
                            obj.key = result[i].batch_num;
                            obj.value = result[i].id;
                            batchItems.push(obj);
                        }
                    });
                }
            });
        }

        function selectBatch(obj){
            if (batchItems.length == 0){
                dd.device.notification.alert({message: "请选择型号", buttonName: "确定"});
                return;
            }
            dd.biz.util.chosen({
                source: batchItems,
                onSuccess : function(result) {
                    obj.value = result.key;
                    $("input[name='batch_id']").val(result.value);
                }
            });
        }

        function wrapParam(params){
            var result = {};
            for (var i in params){
                result[params[i].name] = params[i].value;
            }
            return result;
        }

        function finish(){
            var produceForm = $("#produceForm");
            var params = wrapParam(produceForm.serializeArray());
            if (params.batch_id == ''){
                dd.device.notification.alert({message: "请选择批次", buttonName: "确定"});
                return;
            }

            $.post("${gPath}/clmp/dingtalk/mobility/shift", params, function(result){
                if (result.status == 1){
                    var content = "批次号: "+ result.batch.batch_num + "\n";
                    content += "生产日期: "+ result.shift.production_date + "\n";
                    content += "开工人员: "+ result.opener.name;
                    dd.device.notification.modal({
                        image: result.deviceAttr.pic_url,
                        title: "生成班次成功",
                        content: content,
                        buttonLabels:["继续开工","返回"],
                        onSuccess : function(result) {
                            switch (result.buttonIndex){
                                case 1: window.history.back(); break;
                            }
                        }
                    })
                } else {
                    dd.device.notification.alert({message: "生成班次失败", buttonName: "确定"});
                }
            }, "json");
        }

        function resetForm(){
            $("#produceForm")[0].reset();
            $("input[name='batch_id']").val("");
            batchItems = [];
        }
    </script>
</head>
<body>
    <div class="content">
        <div class="content-one">
            <form id="produceForm"/>
                <p>产品型号：</p>
                <input type="text" readonly onclick="selectModel(this)" placeholder="产品型号" class="production production-info" required/>
                <br>
                <p>批次：</p>
                <input type="hidden" name="batch_id"/>
                <input type="text" readonly onclick="selectBatch(this)" placeholder="批次" class="production production-info" required/>
                <br>
                <p>备注：</p>
                <textarea name="remark" placeholder="备注" style="width: 100%;height: 200px; resize: none;" class="production production-info"></textarea>
                <input type="button" value="开工" onclick="finish()" class="production sousuo"/>
                <input type="button" value="重置" onclick="resetForm()" class="production sousuo"/>
            </form>
        </div>
    </div>
</body>
</html>